<template>
  <div class="accounts-container">
    <el-card class="accounts-card">
      <div slot="header" class="clearfix">
        <span>账户管理</span>
        <el-button style="float: right; margin-left: 10px;" type="primary" @click="refreshAccounts" icon="el-icon-refresh">刷新</el-button>
        <el-button style="float: right;" type="success" @click="saveRecords">保存记录</el-button>
      </div>
      
      <el-table :data="accountsList" style="width: 100%" v-loading="loading">
        <el-table-column prop="name" label="账户名称" width="180"></el-table-column>
        <el-table-column prop="address" label="区块链地址">
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.address" placement="top" effect="light">
              <el-tag type="info">{{ scope.row.address }}</el-tag>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button 
              size="mini" 
              :type="selectedAccount === scope.row.name ? 'success' : 'primary'" 
              @click="selectAccount(scope.row.name)">
              <i :class="selectedAccount === scope.row.name ? 'el-icon-check' : 'el-icon-user'"></i>
              {{ selectedAccount === scope.row.name ? '当前使用中' : '选择使用' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <el-divider content-position="left">关于区块链账户</el-divider>
      
      <el-alert
        title="提示：账户是区块链上的身份标识，用于签署交易"
        type="info"
        :closable="false"
        show-icon>
        <p>1. 每个账户都有一个唯一的区块链地址</p>
        <p>2. 不同账户拥有不同的权限和操作权限</p>
        <p>3. 只有商品的所有者才能修改、转移或删除商品</p>
        <p>4. 请妥善保管账户信息，避免泄露</p>
      </el-alert>
      
      <el-divider content-position="left">系统管理</el-divider>
      
      <el-alert
        title="保存记录功能"
        type="warning"
        :closable="false"
        show-icon>
        <p>点击"保存记录"按钮可以手动触发系统保存所有商品的所有权转移记录数据</p>
        <p>系统也会每10分钟自动保存一次数据</p>
      </el-alert>
    </el-card>
  </div>
</template>

<script>
import { goodsApi, handleApiError } from '@/utils/api'
import { mapState } from 'vuex'

export default {
  name: 'Accounts',
  data() {
    return {
      loading: false
    }
  },
  computed: {
    ...mapState(['accounts', 'selectedAccount']),
    
    accountsList() {
      const result = []
      for (const name in this.accounts) {
        result.push({
          name,
          address: this.accounts[name]
        })
      }
      return result
    }
  },
  created() {
    this.refreshAccounts()
  },
  methods: {
    async refreshAccounts() {
      try {
        this.loading = true
        await this.$store.dispatch('fetchAccounts')
      } catch (error) {
        handleApiError(error)
      } finally {
        this.loading = false
      }
    },
    
    selectAccount(accountName) {
      this.$store.commit('setSelectedAccount', accountName)
      this.$message.success(`已选择账户: ${accountName}`)
    },
    
    async saveRecords() {
      try {
        this.loading = true
        const response = await goodsApi.saveRecords()
        
        if (response.data && response.data.success) {
          this.$message.success('记录数据保存成功')
        } else {
          this.$message.error(response.data.message || '保存记录失败')
        }
      } catch (error) {
        handleApiError(error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.accounts-container {
  padding: 20px;
}

.accounts-card {
  width: 100%;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style> 